<template>
<!--  项目档案-->
  <div class="xmda">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="tab">
      <el-tab-pane label="基本信息" name="1">
        <div class="form-small-title">
          <el-divider direction="vertical" class="form-divider"></el-divider>
          <span class="form-small-font">基本信息</span>
        </div>
        <div class="descriptions">
          <el-row :gutter="20" class="row">
            <el-col :span="8"><span class="label">项目名称</span> {{ selectRow.workName}}</el-col>
            <el-col :span="8"><span class="label">项目编号</span> {{ selectRow.entryNumber}}</el-col>
            <el-col :span="8"><span class="label">项目状态</span> {{ selectRow.status}}</el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col :span="8"><span class="label">项目类型</span> {{ selectRow.planEnd}}</el-col>
            <el-col :span="8"><span class="label">资金来源</span> </el-col>
            <el-col :span="8"><span class="label">投资估算</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col :span="8"><span class="label">立项日期</span> {{ selectRow.date}}</el-col>
            <el-col :span="8"><span class="label">预计收入</span> {{ selectRow.income}}</el-col>
            <el-col :span="8"><span class="label">负责人</span> {{ selectRow.schedule}}</el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col :span="8"><span class="label">项目部门</span> {{ selectRow.status}}</el-col>
            <el-col :span="8"><span class="label">所属单位</span> {{ selectRow.unit}}</el-col>
            <el-col :span="8"><span class="label">事由及说明</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col :span="12"><span class="label">项目目标</span> </el-col>
            <el-col :span="12"><span class="label">可研报告</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col :span="24"><span class="label">立项附件</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col :span="24"><span class="label">预期成果</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col :span="12"><span class="label">取得成果</span> {{ selectRow.bearFruit}}</el-col>
            <el-col :span="12"><span class="label">成果文件</span> </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="项目进度" name="2">
        <div class="form-small-title">
          <el-divider direction="vertical" class="form-divider"></el-divider>
          <span class="form-small-font">项目进度</span>
        </div>
        <div class="descriptions">
          <el-row :gutter="20" class="row">
            <el-col :span="6"><span class="label">计划工期</span> 0 天(自然日)</el-col>
            <el-col :span="6"><span class="label">计划开始</span>{{selectRow.planStartTime}} </el-col>
            <el-col :span="6"><span class="label">计划完成</span> {{selectRow.planEndTime}}</el-col>
            <el-col :span="6"><span class="label">任务计划</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col :span="6"><span class="label">实际工期</span> 0 天(自然日)</el-col>
            <el-col :span="6"><span class="label">实际开始</span> </el-col>
            <el-col :span="6"><span class="label">实际结束</span> </el-col>
            <el-col :span="6"><span class="label">结项日期</span> </el-col>
          </el-row>
          <el-row :gutter="20" class="row">
            <el-col :span="6">
              <div>
                <div class="label"> 项目进度</div>
                <el-progress :percentage="50" status="success" :show-text="false"></el-progress>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="收款合同" name="3">
        <div class="form-small-title">
          <el-divider direction="vertical" class="form-divider"></el-divider>
          <span class="form-small-font">收款合同</span>
        </div>
        <div class="descriptions">
          <el-row :gutter="20" class="row">
            <el-col :span="12"><span class="label">合同名称</span>{{selectRow.contractName}}</el-col>
            <el-col :span="6"><span class="label">合同编号</span>{{selectRow.contractNumber}}</el-col>
            <el-col :span="6"><span class="label">合同金额</span>{{selectRow.totalFee}}</el-col>
          </el-row>
        </div>
        <div class="form-small-title">
          <el-divider direction="vertical" class="form-divider"></el-divider>
          <span class="form-small-font">客户信息</span>
        </div>
        <div class="descriptions">
          <el-row :gutter="20" class="row">
            <el-col :span="12"><span class="label">客户名称</span>{{selectRow.facingEachOther}}</el-col>
            <el-col :span="6"><span class="label">客户编号</span> </el-col>
            <el-col :span="6"><span class="label">法人代表</span> </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="团队成员" name="4">
        <div class="form-small-title">
          <el-divider direction="vertical" class="form-divider"></el-divider>
          <span class="form-small-font">团队成员</span>
        </div>
        <el-table :data="teamTableData" border :header-cell-style="{backgroundColor: '#e7f6f3'}" style="width: 100%;margin-top: 10px">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="name" label="姓名" width="260"></el-table-column>
          <el-table-column prop="depart" label="部门" width="150"></el-table-column>
          <el-table-column prop="role" label="项目角色"></el-table-column>
          <el-table-column prop="tel" label="联系电话"></el-table-column>
          <el-table-column prop="illustrate" label="责任说明"></el-table-column>
          <el-table-column prop="report" label="工作报告" width="250"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="项目文件" name="5">
        <div class="form-small-title">
          <el-divider direction="vertical" class="form-divider"></el-divider>
          <span class="form-small-font">项目文件</span>
        </div>
        <el-table :data="fileTableData" border :header-cell-style="{backgroundColor: '#e7f6f3'}" style="width: 100%;margin-top: 10px">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column prop="fileName" label="文件名称"></el-table-column>
          <el-table-column prop="fileNumber" label="文件编号"></el-table-column>
          <el-table-column prop="date" label="出具日期"></el-table-column>
          <el-table-column prop="attachment" label="文件附件"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "xmda",
  data(){
    return{
      activeName: '1',
      teamTableData:[],
      fileTableData:[]
    }
  },
  props: {
    selectRow: {
      type: Object,
      default: () => {
      },
    },
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped lang="scss">
.xmda ::v-deep{
  .el-tabs__header {
    margin: 0;
  }
  .el-tabs__content {
    padding-top: 20px;
  }
  .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
    border-bottom: 1px solid #dfe6ec !important;
  }
}
.tab {
  margin-top: 10px;
}

.form-small-title{
  border-bottom: solid 2px #C0C4CC;
  padding-bottom: 10px;
}
.form-divider{
  width: 5px;
  height: 26px;
  background: rgb(66, 185, 131);
}
.form-small-font{
  font-size: 19px;
  font-weight: 600;
  color: #303133;
}
.descriptions{
  padding: 10px;
  .row{
    padding: 5px 0;
    .label{
      color: #a4a7af;
      margin-right: 10px;
    }
  }
}
</style>
